<template lang="html">
  <div class="box">
    <header-title :HeaderTitle='title'></header-title>
    <ul class="main_box">
      <li>
        <div>
          <p class="name">用户名</p>
          <p class="main">44565545655645</p>
        </div>
      </li>
      <li>
        <div>
          <p class="name">姓名</p>
          <input type="text" name="" placeholder="请输入您的名字">
        </div>
      </li>
      <li>
        <div>
          <p class="name">性别</p>
          <input type="" name="">
        </div>
      </li>
      <li>
        <div>
          <p class="name">手机号</p>
          <input type="text" name="" placeholder="请输入您的手机号">
        </div>
      </li>
      <li>
        <div>
          <p class="name">验证码</p>
          <input type="text" name="" placeholder="请输入您的验证码">
        </div>
      </li>
      <li>
        <div>
          <p class="name">身份证</p>
          <input type="text" name="" placeholder="请输入您的身份证">
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import title from "../header/header.vue";
export default {
  data () {
    return {
      title:{
        url:'/gerenaccount',
        title:"实名认证"
      }
    }
  },
  components:{
    'header-title':title
  }
}
</script>

<style scoped lang="less">
@import '../../../assets/less/index.less';
.box {
  .main_box{
    width: 100vw;
    border-top: solid 1vw @color8;
    li{
      width:100vw;
      border-bottom: solid 1px @color8;
      div{
        width: @width;
        margin: 0 auto;
        height: 12vw;
        line-height: 12vw;
        overflow: hidden;
        zoom:1;
        color: @color7;
        p{
          float: left;
          width: 15vw;
        }
        input{
          width: 60vw;
        }
      }
    }
  }
}
</style>